<template>
	<u-popup bgColor="transparent" :round="10" :show="show" mode="center" @close="close" >
		<view class="infoPop">
			<view class="infoTitle">获奖记录</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view v-for="(item,index) in list" :key="index" class="listStyle">
					{{item.content}}
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>
<script>
	import {lotteryInfo} from '@/api/index.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				scrollTop: 0,
				list:[],
				params:{
					pageNo:1,
					pageSize:10
				},
				total:0
			}
		},
		methods: {
			lower(){
				if(this.list.length<this.total){
					this.params.pageNo++
					this.getList()
				}
			},
			async getList(){
				let res = await lotteryInfo(this.params)
				this.list = [...this.list,...res.data.records]
				this.total = res.data.total
			},
			close() {
				this.$emit('success')
				this.list=[]
			}
		}
	}
</script>
<style scoped>
	.infoTitle{
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 35rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.listStyle{
		width: 100%;
		min-height: 80rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx 15rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		color: #FFFFFF;
	}
	.scroll-Y {
		width: 690rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 10rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.infoPop {
		width: 700rpx;
		height: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		border-radius: 10rpx;
		background-color: #1B2638;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
	}
</style>